<template>
	<div v-loading="load.load">
		<div class="adminMain">
			<el-row class="tableBtnTop">
				<el-select v-model="field.id" placeholder="请选择" class="filter">
					<el-option v-for="(item, index) in field.list" :label="item.label" :key="item.key" :value="item.value"></el-option>
				</el-select>
				<div class="search">
					<el-input placeholder="请搜索" v-model="keyword" @keyup.enter.native="page = 1;getList()">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<el-date-picker type="daterange" v-model="time" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" style="width:400px;margin-right:15px;" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" popper-class="index_promotionData_daterange_popper_class"></el-date-picker>
				<el-button class="f1" @click="getList">立即搜索</el-button>
				<el-button class="f1" @click="navFunction('show', -1)" style="margin-left:15px;">分类管理</el-button>
			</el-row>
			<el-table :data="tableData" border @filter-change="filterChange">
				<el-table-column prop="id" label="ID" :show-overflow-tooltip="true" fixed width="150"></el-table-column>
				<el-table-column prop="" label="用户" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<div class="device_view flex">
							<a class="userHead" target="_blank" :href="`/user/detail?id=${scope.row.id}`">
								<img :src="scope.row.avatar" v-if="scope.row.avatar" class="square" />
								{{ scope.row.nickname || "-" }}
							</a>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="" label="提示词" :show-overflow-tooltip="true">
					<template slot-scope="scope">给我女友写一首生日快乐歌</template>
				</el-table-column>
				<el-table-column prop="" label="状态" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						已失败<span style="font-size: 11px;margin-left: 10px;color: #999;">{{ scope.row.comment || "无失败原因" }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="" label="信息" :show-overflow-tooltip="true">
					<template slot-scope="scope">点赞2 / 下载2 / 分享1</template>
				</el-table-column>
				<el-table-column prop="" label="提交时间" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.created_at || "-" }}</template>
				</el-table-column>
				<el-table-column prop="" label="完成时间" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.created_at || "-" }}</template>
				</el-table-column>
				<el-table-column prop="" label="生成结果" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<el-popover placement="top-start" title="生成结果" width="400" trigger="hover">
							<slot>
								<div class="ads_layer" style="max-height: 600px;overflow: auto;">
									<div style="font-size:12px;margin: 10px 0;">歌曲名称：牛逼之歌</div>
									<div style="font-size:12px;margin: 10px 0;">封面：<img :src="scope.row.avatar" style="width: 20px;height: 20px;border-radius: 6px;vertical-align: middle;margin-top: -2px;" /></div>
									<div style="font-size:12px;margin: 10px 0;">风格：真的很牛逼</div>
									<div style="font-size:12px;margin: 10px 0;">时长：165秒</div>
									<div style="font-size:12px;margin: 10px 0;">歌词：真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？真的有这么牛逼吗？</div>
								</div>
							</slot>
							<span slot="reference" class="ell">
								牛逼之歌
							</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="" label="分类" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<el-select placeholder="请选择" size="mini">
							<el-option></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="" label="推荐" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<el-checkbox-group :value="['推荐', '显示']" size="mini">
						    <el-checkbox label="推荐"></el-checkbox>
						    <el-checkbox label="显示"></el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
		        <el-table-column prop="user" label="操作" :show-overflow-tooltip="true">
		            <template slot-scope="scope">
		                <div class="tableBtn">
		                    <a :href="`/user/detail?id=${scope.row.id}`" class="color" target="_blank">听一下</a>
							<el-popconfirm title="确定删除吗？" @confirm="">
							    <a slot="reference" style="color:#999;">删除</a>
							</el-popconfirm>
		                </div>
		            </template>
		        </el-table-column>
			</el-table>
			<div class="paginationBlock">
				<el-pagination layout="prev, pager, next, sizes, total" @size-change="getList" @current-change="getList" :total="total" :current-page.sync="page" :page-size.sync="limit" ></el-pagination>
			</div>
		</div>
		
		<!-- 分类管理 -->
		<el-dialog title="提示" :visible.sync="nav.show" width="1050px">
			<div v-loading="nav.load.load">
				<el-row class="tableBtnTop">
					<el-button class="f1" @click="navFunction('edit', -1)">添加分类</el-button>
				</el-row>
				<el-table :data="nav.data" border v-if="nav.data">
					<el-table-column prop="id" label="ID" :show-overflow-tooltip="true" fixed width="150"></el-table-column>
					<el-table-column prop="" label="分类名称" :show-overflow-tooltip="true">
						<template slot-scope="scope">
							<div class="userHead flex">
								<el-upload class="el-upload"  action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response, 'icon')" accept="image/png,image/jpeg">
									<img v-if="scope.$index !== 0" src="https://api.sora13.com/download/20240530/avatar665875eac85fd863531.png" class="square" />
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								{{ scope.row.title || "-" }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="" label="排序" :show-overflow-tooltip="true">
						<template slot-scope="scope">
							{{ scope.row.sort }}
							<i class="rechargeBtn" @click="navFunction('sort', scope.$index)">修改</i>
						</template>
					</el-table-column>
					<el-table-column prop="" label="添加时间" :show-overflow-tooltip="true">
						<template slot-scope="scope">{{ scope.row.created_at || "-" }}</template>
					</el-table-column>
					<el-table-column prop="user" label="操作" :show-overflow-tooltip="true">
						<template slot-scope="scope">
							<div class="tableBtn">
								<a @click="navFunction('edit', scope.$index)">编辑</a>
								<el-popconfirm title="确定删除吗？" @confirm="navFunction('delete', scope.$index)">
									<a slot="reference" style="color:#999;">删除</a>
								</el-popconfirm>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 是否处于加载中
				load: { load: false },
				
				// 表格数据
				tableData: [],
				
				// 当前页数
				page: this.$route.query.page ? parseInt(this.$route.query.page) : 1,
				
				// 每页条数
				limit: this.$route.query.limit ? parseInt(this.$route.query.limit) : this.app.limit,
				
				// 总数
				total: this.$route.query.total ? parseInt(this.$route.query.total) : 0,
				
				// 可选择的搜索类型列表
				field: {
					list: [],
					id: this.$route.query.field || "",
				},
				
				// 搜索关键词
				keyword: this.$route.query.keyword || "",
				
				// 时间
				time: this.$route.query.time ? this.$route.query.time.split(",") : [],
				
				// 过滤某些类型
				filter: [],
				
				// 分类管理
				nav:{
					show: false,
					load: {load:false},
					data: null,
				},
				
			};
		},
		computed: {
			
			// 过滤类型筛选
			filerComputed(){
				return function(key){
					let filerItem = { select: [], value: [] };
					this.filter.filter((item, index) => {
						(item.field === key) && (filerItem = item);
					});
					return filerItem;
				}
			},
			
		},
		methods: {
			
			// 分类弹窗
			navFunction(type, index){
				let _this = this;
				if(type == "show"){
					_this.app.ajax({
						url: "/admin/aiAgentType/index",
						method: "POST",
						load: _this.nav.load,
						success(res){
							_this.nav.data = res.data.list;
						}
					});
					_this.nav.show = true;
				}else if(type == "sort" || type == "edit"){
					_this.$prompt(type == "sort" ? "请输入排序" : "请输入分类名称", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						inputValue: type === "sort" ? _this.nav.data[index].sort : (index === -1 ? "" : _this.nav.data[index].title)
					}).then(({ value }) => {
						let data = {};
						if(type == "sort"){
							data = {
								title: _this.nav.data[index].title,
								sort: value,
							}
						}else if(type == "edit"){
							data = {
								title: value,
								sort: (index === -1 ? 0 : _this.nav.data[index].sort),
							}
						}
						
						if(index !== -1){
							data.id = _this.nav.data[index].id;
						}
						_this.app.ajax({
							url: "/admin/aiAgentType/update",
							method: "POST",
							load: _this.nav.load,
							data: data,
							success(res){
								_this.navFunction('show');
								_this.$notify({title: "提示",message: res.msg, type: "success"});
							}
						});
					});
				}else if(type == "delete"){
					_this.app.ajax({
						url: "/admin/aiAgentType/del",
						method: "POST",
						load: _this.nav.load,
						data: {
							id: _this.nav.data[index].id
						},
						success(res){
							_this.navFunction('show');
							_this.$notify({title: "提示",message: res.msg, type: "success"});
						}
					});
				}
			},
				
			// 加载列表
			getList(){
				let _this = this;
				let filterData = {}; //筛选的参数
				_this.filter.map((item) => filterData[item.field] = item.value.join(","));
				_this.app.ajax({
					url: "/admin/customer/index",
					method: "POST",
					data: Object.assign({
						keyword: _this.keyword,
						field: _this.field.id,
						limit: _this.limit,
						page: _this.page,
						time: _this.time ? _this.time.join(",") : "",
					}, filterData),
					load: _this.load,
					changeUrl: true,
					success(res){
						_this.total_channel = res.data.total_channel;
						_this.total = res.data.total;
						_this.tableData = res.data.list;
						_this.field.list = res.data.fields;
						_this.field.id = _this.field.id || res.data.fields[0].value;

						res.data.filter.map((item) => {
							item.value = _this.$route.query[item.field] ? _this.$route.query[item.field].split(",") : [];
						});
						_this.filter = res.data.filter;
					}
				})
			},
			
			// 筛选变更
			filterChange(e) {
				this.filter.map((item) => {
					if(item.field === Object.keys(e)[0]){
						item.value = e[item.field];
					}
				});
				
				this.$nextTick(() => {
					this.page = 1;
					this.getList();
				});
			},
			
		},
		mounted(){
			this.getList();
		}
	};
</script>


<style lang="scss" scoped>
	.el-upload {
		$width: 37px;
		display: block;
		width: $width;
		height: $width;
		margin-right: 12px;
		.avatar-uploader-icon {
			font-size: 18px;
			border: 1px dashed #d9d9d9;
			border-radius: 4px;
			color: #8c939d;
			width: $width;
			height: $width;
			line-height: $width - 2px;
			text-align: center;
			display: block;
		}
		.avatar {
			width: $width;
			height: $width;
			display: block;
			border-radius: 4px;
		}
	}
</style>